<template>
  <div class="app-container home" id="screen-index">

    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <screen-title />
        <name-and-time />
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div class="item" v-for="item,index in list" :key="index" :class="[index<2?'pointer':'']">
              <item-text :item="item" />
            </div>
          </div>
          <div class="content-box2">
            <div style="z-index: 100;">
              <div v-for="item,index in list2"  :key="index" >
                <dv-border-box-1 >
                  <item-chart :item="item" />
                </dv-border-box-1>
              </div>
            </div>
            <div>
              <div>
                <item-map :mapData="mapData"/>
              </div>
              <div>
               <dv-border-box-8>
                 <item-table :tableData="tableData"/>
               </dv-border-box-8>
              </div>
            </div>
            <div style="z-index: 100;">
              <div v-for="item,index in list3" :key="index">
                <dv-border-box-1>
                  <item-chart :item="item" />
                </dv-border-box-1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
    <el-dialog title="测量数据" :visible.sync="testView" width="80vw" append-to-body>
      <test-table ref="testTable" @closeTestView="closeTestView"/>
    </el-dialog>
  </div>
</template>

<script>
  import screenTitle from "./components/title.vue";
  import nameAndTime from "./components/nameAndTime.vue";
  import itemText from "./components/item-text.vue";
  import itemChart from "./components/item-chart.vue";
  import itemMap from "./components/item-map";
  import itemTable from "./components/item-table";
  import testTable from "./components/test-table";
  import {
  getToken
  } from "@/utils/auth";
  import {
  parseTime
  } from "@/utils/ruoyi";
import {
    patientNumKpiData,
    patientTestActionKpiData,
    doctorTaskKpiData,
    patientAreaScatterCountData,
    patientEvaluateCountData,
    deviceCountData,
    patientAgeCountData,
    patientSexCountData
  } from "@/api/manbing/screen";
  import {
    newestBloodTestList
  } from "@/api/manbing/doctor";
  export default {
    name: "Screen",
    components: {
      screenTitle,
      nameAndTime,
      itemText,
      itemChart,
      itemMap,
      itemTable,
      testTable
    },
    data() {
      return {
        loading:false,
        roleId: sessionStorage.getItem("roleId"),
        colors:['#409EFF','rgb(253,154,1)','red'],//警告颜色
        list: [{
            title: '患者总数',
            value: 0,
            plus:0,
            unit: '人',
            data: [{
                title: '原发性',
                value: 0,
                plus: 0
              },
              {
                title: '继发性',
                value: 0,
                plus: 0
              },
            ],
          },
          {
            title: '总测量次数',
            value: 0,
            unit: '次',
            plus:0,
            data: [{
                title: '正常',
                value: 0,
                plus: 0
              },
              {
                title: '轻度',
                value: 0,
                plus: 0
              },
              {
                title: '一般',
                value: 0,
                plus: 0
              },
              {
                title: '中度',
                value: 0,
                plus: 0
              },
              {
                title: '严重',
                value: 0,
                plus: 0
              },
            ],
          },
          {
            title: '任务总次数',
            value: 0,
            unit: '次',
            plus:0,
            data: [{
                title: '提醒',
                value: 10,
                plus: 1
              },
              {
                title: '关怀',
                value: 10,
                plus: 1
              },
            ]
          },
      ],
        list2:[
          {id:'chart1',title:'预警占比',data:[
            {title:'正常',value:-1,color:'green'},
            {title:'轻度',value:-1,color:'#409EFF'},
            {title:'一般',value:-1,color:'rgb(244,234,44)'},
            {title:'中度',value:-1,color:'rgb(253,154,1)'},
            {title:'严重',value:-1,color:'red'},
          ]},
          {id:'chart2',title:'设备绑定',data:[
            {title:'已绑定',value:-1,color:'green'},
            {title:'未绑定',value:-1,color:'#409EFF'},
          ]},
          {id:'chart3',title:'患者评价',data:[]}
        ],
        list3:[
          {id:'chart4',title:'病类占比',data:[
            {title:'原发性',value:-1,color:'green'},
            {title:'继发性',value:-1,color:'#409EFF'},
          ]},
          {id:'chart5',title:'年龄占比',data:[]},
          {id:'chart6',title:'性别占比',data:[
            {title:'男',value:-1,color:'green'},
            {title:'女',value:-1,color:'#409EFF'},
          ]}
        ],
        listTemp:null,
        list2Temp:null,
        list3Temp:null,
        tableDataTemp:null,
        mapDataTemp:null,
        queryParams: {
          pageNum: 1,
          pageSize: 6,
          searchType:1,
        },
        tableData:[],
        mapData:[],
        testView:false,//测量弹出
        websock:null,
        timer:null,
    };
  },
  watch: {
    $route(to, from) {
      if (to.path.indexOf('/manbing/screen') > -1) {
        setTimeout(()=>{
         this.showLoading()
        },100)

      }
    },
    loading(val){
      if(!val){
          this.refresh()
      }
    }
  },
  created() {
     this.init()
     this.onresize()
     this.initWebSocket()
    },
    methods: {
      onresize(){
        window.addEventListener('resize',()=>{
          if(this.$route.name=='Screen'){
            this.showLoading()
          }
        })
      },
      showLoading(){
        if(this.timer){
          clearInterval(this.timer)
          this.timer=null
        }
        this.loading = true;
        this.timer=setTimeout(()=>{
          this.loading = false;
        },500)
      },
      refresh(){
        if(this.list){
           this.listTemp=JSON.stringify(this.list)
         }
         if(this.list2){
           this.list2Temp=JSON.stringify(this.list2)
         }
         if(this.list3){
           this.list3Temp=JSON.stringify(this.list3)
         }
         if(this.tableData){
           this.tableDataTemp=JSON.stringify(this.tableData)
         }
         if(this.mapData){
           this.mapDataTemp=JSON.stringify(this.mapData)
         }
        this.$nextTick(()=>{
          if(this.listTemp){
            this.list=JSON.parse(this.listTemp)
          }
          if(this.list2Temp){
            this.list2=JSON.parse(this.list2Temp)
          }
          if(this.list3Temp){
            this.list3=JSON.parse(this.list3Temp)
          }
          if(this.tableDataTemp){
            this.tableData=JSON.parse(this.tableDataTemp)
          }
          if(this.mapDataTemp){
            this.mapData=JSON.parse(this.mapDataTemp)
          }
        })
      },
      init(){
        this.getPatientNumKpiData()
        this.getPatientTestActionKpiData()
        this.getDoctorTaskKpiData()
        this.getPatientEvaluateCountData()
        this.getDeviceCountData()
        this.getPatientAgeCountData()
        this.getPatientSexCountData()
        this.getPatientAreaScatterCountData()
        this.getNewestBloodTestList()
      },
      //显示测量数据
      action(index) {
        if(!index){
          this.$router.push('/manbing/patient')
        }else if(index==1){
          this.testView=true
          this.$nextTick(() => {
            this.$refs.testTable.init();
          });
        }
      },
      closeTestView(){
        this.testView=false
      },
      //患者人数KPI
      getPatientNumKpiData(){
        patientNumKpiData({}).then(res=>{
          if(res.code==200){
              this.list[0].value=res.data.totalNum
              this.list[0].plus=res.data.todayAddNum
              this.list[0].data[0].value=res.data.totalEssentialNum
              this.list[0].data[0].plus=res.data.todayAddEssentialNum
              this.list[0].data[1].value=res.data.totalSecondaryNum
              this.list[0].data[1].plus=res.data.todayAddSecondaryNum

              this.list3[0].data[0].value=res.data.totalEssentialNum
              this.list3[0].data[1].value=res.data.totalSecondaryNum
          }
        })
      },
    //患者测量行为指标KPI
      getPatientTestActionKpiData(){
        patientTestActionKpiData({}).then(res=>{
          if(res.code==200){
              this.list[1].value=res.data.totalNum
              this.list[1].plus=res.data.todayAddNum
              this.list[1].data[0].value=res.data.totalNormalNum
              this.list[1].data[0].plus=res.data.todayAddNormalNum
              this.list[1].data[1].value=res.data.totalMildAbnormalNum
              this.list[1].data[1].plus=res.data.todayAddMildAbnormalNum
              this.list[1].data[2].value=res.data.totalGeneralAlarmNum
              this.list[1].data[2].plus=res.data.todayAddGeneralAlarmNum
              this.list[1].data[3].value=res.data.totalModeratelAlarmNum
              this.list[1].data[3].plus=res.data.todayAddModeratelAlarmNum
              this.list[1].data[3].value=res.data.totalSeriousAlarmNum
              this.list[1].data[3].plus=res.data.todayAddSeriousAlarmNum


                  this.list2[0].data[0].value=res.data.totalNormalNum
                  this.list2[0].data[1].value=res.data.totalMildAbnormalNum
                  this.list2[0].data[2].value=res.data.totalGeneralAlarmNum
                  this.list2[0].data[3].value=res.data.totalModeratelAlarmNum
                  this.list2[0].data[4].value=res.data.totalSeriousAlarmNum
          }
        })
      },
    //医生任务指标KPI
      getDoctorTaskKpiData(){
        doctorTaskKpiData({}).then(res=>{
          if(res.code==200){
            this.list[2].value=res.data.totalRemindNum+res.data.totalCaredNum
            this.list[2].plus=res.data.todayAddRemindNum+res.data.todayAddCaredNum

              this.list[2].data[0].value=res.data.totalRemindNum
              this.list[2].data[0].plus=res.data.todayAddRemindNum
              this.list[2].data[1].value=res.data.totalCaredNum
              this.list[2].data[1].plus=res.data.todayAddCaredNum
          }
        })
      },

    //设备数量占比统计
    getDeviceCountData(){
      deviceCountData({}).then(res=>{
        if(res.code==200){
          this.list2[1].data[0].value=0//res.data.bindNum
          this.list2[1].data[1].value=0//res.data.unbindNum
        }
      })
    },
    //患者对医生的评价占比统计
      getPatientEvaluateCountData(){
        patientEvaluateCountData({}).then(res=>{
          if(res.code==200){
          this.list2[2].data=   res.data.map((item,index)=>{
             return {
                title:item.groupName,
                value:item.evaluateNum,
                color:this.colors[index]
              }
            })
          }
        })
      },
    //患者年龄占比统计
    getPatientAgeCountData(){
      patientAgeCountData({}).then(res=>{
        if(res.code==200){
          this.list3[1].data=res.data.map((item,index)=>{
             return {
                title:item.ageGroupName,
                value:item.num,
                color:this.colors[index]
              }
            })
          }
      })
    },
    //患者性别占比统计
    getPatientSexCountData(){
      patientSexCountData({}).then(res=>{
        if(res.code==200){
          this.list3[2].data[0].value=res.data.manNum
          this.list3[2].data[1].value=res.data.womanNum
          }
      })
    },
    //患者区域分布统计
    getPatientAreaScatterCountData(){
      patientAreaScatterCountData({cityName:'宜宾市'}).then(res=>{
        if(res.code==200){
           this.mapData=res.data
        }
      })
    },
    //测量数据
    getNewestBloodTestList() {
      newestBloodTestList(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data
          }
        })
    },
      initWebSocket(){ //初始化weosocket
        const wsuri = process.env.VUE_APP_BASE_API.replace('http','ws')+"/websocket";
        // const wsuri = "ws://192.168.0.200:8081/websocket";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        // this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
        this.$bus.$on('websocketonmessage',this.handleMessage)
      },
      websocketclose(){
        this.initWebSocket()
      },
       websocketonopen(){ //连接建立之后执行send方法发送数据
        let userId=JSON.parse(sessionStorage.getItem('user')).userId,
        roleId=sessionStorage.getItem('roleId');
        this.websocketsend(`${userId}#${roleId}#${getToken()}`);
      },
       websocketsend(Data){//数据发送
          this.websock.send(Data);
        },
      websocketonmessage(e){ //数据接收
          this.$bus.$emit('websocketonmessage',e)
      },
      handleMessage(e){
        try{
          if(e.data&&e.data!='连接成功'&&e.data!='更新统计'){
            if(e.data=='大屏-患者人数KPI'){
               this.getPatientNumKpiData()
            }else if(e.data=='大屏-患者测量行为指标KPI'){
               this.getPatientTestActionKpiData()
            }else if(e.data=='大屏-医生任务指标KPI'){
               this.getDoctorTaskKpiData()
            }else if(e.data=='大屏-患者区域分布'){
               this.getPatientAreaScatterCountData()
            }else if(e.data=='大屏-患者对医生的评价占比'){
              this.getPatientEvaluateCountData()
            }else if(e.data=='大屏-设备数量占比'){
              this.getDeviceCountData()
            }else if(e.data=='大屏-患者年龄占比'){
             this.getPatientAgeCountData()
            }else if(e.data=='大屏-患者性别占比'){
             this.getPatientSexCountData()
            }else{
              let temp=JSON.parse(e.data)
              temp.testDate= parseTime(new Date(temp.testDate))
               this.tableData.unshift(temp)
               if(this.tableData.length>6){
                 this.tableData.splice(6,1)
               }
            }

          }
        }catch(e){

        }
      }
    },
  };
</script>

<style lang="scss">
  .screen-index{

  }
  @import "@/assets/datav-scss/index.scss";
  // 引入全局css
 @import '@/assets/datav-scss/style.scss';
  .pointer{
    cursor: pointer;
  }
</style>
